<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="javascript:;"> 这是一个没有意义的超链接</a>
    <div class="box1">这是属性为box1的元素
        <span class="s1">div里的属性为s1的span元素</span>
        <span class="s1">div里的属性为s1的span元素</span>
    </div>


    <span class="s1">div外的属性为s1的span元素</span>
    <script>
        /* 
            div元素的原型
                HTMLDivElement  ->  HTMLElement ->  Element ->  Node  ->  EvenTarget ——> Obkect.prototype ——> null
            
            通过元素节点对象获取其他节点的方法
                element.childNodes                  获取当前元素的子节点(会包含空格的子节点)
                element.children                    获取当前元素的所有子元素
                elemrnt.firstChild                  获取当前元素的第一个子节点
                element.firstElementChild           获取当前元素的第一个子元素
                element.lastElementChild            获取当前元素的最后一个子元素
                element.nextSibling                 获取当前元素的下一个兄弟节点
                element.nextElementSibling          获取当前元素的下一个兄弟元素
                element.previousElementSibling      获取当前元素的前一个兄弟元素
                element.parentNode                  获取当前元素的父节点
                element.parentElement               获取当前元素的父元素
                element.tagName                     获取当前元素的标签名

        */
        document.title="元素节点的属性和方法"
        const box1=document.querySelector(".box1")
        console.log(box1)
        Object.getPrototypeOf(box1)

        const spans=box1.getElementsByTagName("span")
        const spans2 = box1.getElementsByClassName("s1")

        // 获取当前元素的子节点(会包含空格的子节点)
        const cns = box1.childNodes
        console.log(cns, cns.length)
        
        //获取当前元素的所有子元素
        const children=box1.children
        console.log(children,children.length)

        //获取当前元素的第一个子节点
        const firstchild=box1.firstChild
        console.log(firstchild,firstchild.length)

        //获取当前元素的第一个子元素
        const first_Element_Child = box1.firstElementChild
        console.log(first_Element_Child)
        
        //获取下一个兄弟元素
        const nextElementSibling=box1.nextElementSibling
        console.log(nextElementSibling)

        //获取当前元素的前一个兄弟元素
        const previousElementSibling=box1.previousElementSibling
        console.log(previousElementSibling)

        //获取当前元素的父元素
        const parentElement=box1.parentElement
        console.log(parentElement)

        // 获取当前元素的标签名
        const target_Name=box1.tagName
        console.log(target_Name)
    </script>
</body>
</html>